<template>
  <div>
    <el-dialog
      :title="`${corpInfo.name}-管理员列表`"
      :visible.sync="dialogVisible"
      width="60%"
      :center="true"
      :before-close="handleClose"
      @close="onClose"
    >
      <el-table
        :data="adminList"
        v-loading="adminLoading"
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column align="center" label="姓名">
          <template slot-scope="scope">
            <span v-if="!scope.row.newFlag">{{scope.row.userName}}</span>
            <el-input v-else v-model.trim="scope.row.userName"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="手机号码">
          <template slot-scope="scope">
            <span v-if="!scope.row.newFlag">{{scope.row.mobileNo}}</span>
            <el-input v-else v-model.trim="scope.row.mobileNo"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="180px">
          <template slot-scope="scope">
            <template v-if="!scope.row.newFlag">
              <!-- <el-button
                type="primary"
                @click.native.stop="onEdit(scope.row)"
                size="small"
                icon="el-icon-edit"
              >编辑</el-button>-->
              <el-button
                icon="el-icon-delete"
                size="small"
                type="warning"
                @click.native.stop="onDelete(scope.row)"
              >移除</el-button>
            </template>
            <template v-else>
              <el-button
                type="success"
                @click.native.stop="onSave(scope.row)"
                size="small"
                icon="el-icon-circle-check-outline"
              >保存</el-button>
              <el-button
                icon="el-icon-delete"
                size="small"
                type="warning"
                @click.native.stop="onCancel(scope.row)"
              >取消</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onAddItem">新 增</el-button>
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  addCorpAdmin, // 添加管理员
  delCorpAdmin, // 删除管理员
  getCorpAdminList // 获取管理员列表
} from "@/api/corpConfig";
export default {
  props: {
    options: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      corpInfo: {},
      adminList: [],
      dialogVisible: false,
      adminLoading: false
    };
  },
  created() {
    this.dialogVisible = true;
    this.corpInfo = Object.assign({}, this.options);
    this.getAdminList();
  },
  methods: {
    // 获取管理员列表
    getAdminList() {
      this.adminLoading = true;
      getCorpAdminList({
        corpId: this.corpInfo.id
      }).then(
        res => {
          if (res.data) {
            this.adminList = res.data.map(item => {
              this.$set(item, "edit", false);
              this.$set(item, "userNameOrg", item.userName);
              this.$set(item, "mobileNoOrg", item.mobileNo);

              return item;
            });
          }
          this.adminLoading = false;
        },
        err => {
          this.adminLoading = false;
        }
      );
    },
    handleClose(done) {
      this.$confirm("确认关闭？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 编辑
    onEdit(row) {
      row.edit = true;
    },
    // 保存
    onSave(row) {
      addCorpAdmin({
        userName: row.userName,
        mobileNo: row.mobileNo,
        corpId: this.corpInfo.id
      }).then(
        res => {
          row.userId = res.data.userId;
          row.newFlag = false
          this.$message({
            type: 'success',
            message: '保存成功'
          })
        },
        err => {
          this.$message({
            type: 'warning',
            message: '操作失败，请重新操作！'
          })
        }
      );
    },
    // 取消编辑
    onCancel(row) {
      this.adminList.forEach((item, index) => {
        if (item.newId === row.newId) {
          this.adminList.splice(index, 1);
        }
      });
    },
    // 移除
    onDelete(row) {
      this.$confirm("确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(_ => {
          this.adminLoading = true;
          delCorpAdmin({
            userId: row.userId
          }).then(
            res => {
              this.adminList.forEach((item, index) => {
                if (item.userId === row.userId) {
                  this.adminList.splice(index, 1);
                }
              });
              this.adminLoading = false;
              this.$message({
                type: "success",
                message: "操作成功"
              });
            },
            err => {
              this.adminLoading = false;
              this.$message({
                type: "warning",
                message: "操作失败,请重新操作"
              });
            }
          );
        })
        .catch(_ => {});
    },
    // 新增
    onAddItem() {
      let item = {
        userName: "",
        mobileNo: "",
        userNameOrg: "",
        mobileNoOrg: "",
        corpId: this.corpInfo.id,
        newFlag: true
      };
      this.adminList.push(item);
    },
    // 弹窗关闭前执行
    onClose() {
      this.$emit("adminDialog", false);
    }
  }
};
</script>

